

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <script src="static/js/jquery-2.1.4.min.js"></script>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .BOX{
            width:1050px;
            margin: 0 auto;
            margin-top: 30px;
            font-size: 14px;
        }
        a{
            text-decoration: none;
        }
        .boxTu{
            overflow: hidden;
            width:925px;
            margin: 0 auto;
        }
        .tu{
            width: 400px;
            /*min-height: 500px;
              */
            box-sizing: border-box;
            border: 1px solid #ccc;
        }
        .box{
            float: left;
            text-align: center;
        }
        .box2{
            float: left;
            overflow: hidden;
        }
        .btn1{
            position: relative;
            padding: 8px 18px;
            line-height: 500px;
        }
        .btn2{  
            margin: 235px 30px;
            float: left;
        }
        .btn2:disabled{
            background: #aaa;
        }
        .btn{
            background:  #029fe8;
            border:  #029fe8;
            color: white;
            padding: 8px 18px;
            text-align: center;
            border-radius: 4px;
            cursor: pointer;
            outline: none;
        }
        .fHide{
            overflow: hidden;
            height: 35px;
            opacity: 0;
            width: 70px;
            right: 0;
            top: 0;
            position: absolute;
            cursor: pointer;
        }
        .imgshow img{
            width: 100%;
        }
        #submitFrame{
            width: 402px;
            overflow: hidden;
        }
        #submitFrame body{
            width: 400px;
        }
        #submitFrame body img{
            width: 400px;
        }
    </style>
</head>
<body>

    <div class="BOX">
        <div class="boxTu">
            <div class="box tu">
                <a href="" class="btn1 btn">上传
                    <input type="file" name="file" multiple="multiple" class="fHide" onchange="upImg(this.files)">
                </a>
                <div class="imgshow"></div>
            </div>
            <input type="button" class="btn btn2" value="修图" disabled="disabled" onclick="getImg()"><!-- 
            <div class="box2 tu"></div> -->
            <iframe class="box2 tu" scroll="no" marginwidth="0" marginheight="0" frameborder="0" id="submitFrame"  name="submitFrame"  src="about:blank" width="402px" ></iframe>
        </div>
    </div>
</body>
</html>

<script>
    function upImg(file){
        let reader = new FileReader();
        reader.readAsDataURL(file[0]);
        reader.onloadend = function(){
            let base64 = reader.result;
            $('.btn1').hide();
            $(".imgshow").html('<img src="'+base64+'">');
            $('.btn2').attr('disabled',false);
            $('#submitFrame').css('height',$('.box').css('height'))
        }
    }
    function getImg(){
        var form = $('<form action="http://120.132.68.29:8888/file" id="selectPro" enctype="multipart/form-data" method="post"   target="submitFrame"></form>');
        form.append($('.fHide'));
        $(document.body).append(form);
        form.submit();
        $('.btn2').attr('disabled',true)
    }
</script>
